import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { Link } from 'react-router-dom'
export default class Home extends Component {
  constructor(){
    super()
    this.state={
      cates:[
        {id:1,catename:'家用电器'},
        {id:2,catename:'美妆护肤'},
        {id:3,catename:'运动健身'},
        {id:4,catename:'电竞游戏'},
      ],
      goods:[
      {
        id:1,goodsname:'手机1',price:19.9
      },
      {
        id:2,goodsname:'手机2',price:29.9
      },
      {
        id:3,goodsname:'手机3',price:30.9
      }
    ]
    }
  }
  render() {
    let {cates,goods} =this.state
    return (
      <div>
          <Header title='首页'></Header>
          <ul>
            {
              cates.map(item=>{
                return <li key={item.id}>
                  <Link to={'/list?id='+item.id}>{item.catename}</Link>
                </li>
              })
            }
          </ul>
          <hr />
          <h3>商品列表</h3>
          <ol>
            {
              goods.map((item)=>{
                return (<li key={item.id} style={{margin:'0.2rem',background:'#ccc'}}>
                  <Link to={'/Detail/'+item.id}>
                  <div>{item.goodsname}</div>
                  <div>price:{item.price}</div>
                  </Link>
                </li>)
              })
            }
          </ol>
      </div>
    )
  }
}
